<template>
  <view>
    <cmd-nav-bar back title="信息设置"></cmd-nav-bar>
    <cmd-page-body type="top">
      <cmd-transition name="fade-up">
        <view>
          <cmd-cell-item title="头像" slot-right arrow>
            <cmd-avatar :src="userInfo.avatar || '/static/img/logo/logo.png'"></cmd-avatar>
          </cmd-cell-item>
          <cmd-cell-item title="昵称" :addon="userInfo.nickName || '请输入'" arrow></cmd-cell-item>
		  <cmd-cell-item title="性别" slot-right arrow>
			  <picker @change="bindPickerGender" :range="gender" :value="userInfo.gender" >
			  	<view class="uni-input">{{gender[userInfo.gender] || '请选择'}}</view>
			  </picker>
		  </cmd-cell-item>
		<cmd-cell-item title="生日" slot-right arrow>
			 <picker mode="date" @change="bindDateChange" :value="userInfo.birthday">
			  	<view class="uni-input">{{userInfo.birthday || '请选择'}}</view>
			 </picker>
		 </cmd-cell-item>
		  <!-- #ifdef MP-WEIXIN -->
		  <cmd-cell-item title="手机号" slot-right arrow>
			  <view v-if="userInfo.mobile == null">
				  <u-button type="primary" shape="circle" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				  	获取手机号
				  </u-button>
			  </view>
			  <view v-else>
			      <view class="uni-input">{{userInfo.mobile || '请输入'}}</view>
			  </view>
		  </cmd-cell-item>
		  <!-- #endif -->
		  <!-- #ifndef MP-WEIXIN -->
		  <cmd-cell-item title="手机号" :addon="userInfo.mobile || '请输入'" arrow></cmd-cell-item>
		  <!-- #endif -->
          <cmd-cell-item title="邮箱" :addon="userInfo.email || '请输入'" arrow></cmd-cell-item>
          <cmd-cell-item title="修改密码" @click="fnClick('modify')" arrow></cmd-cell-item>
          <button class="btn-logout" @click="fnClick('logout')">退出登录</button>
        </view>
      </cmd-transition>
    </cmd-page-body>
  </view>
</template>

<script>
  import {getUserInfo,modifyUser,decodeUserInfo} from '@/common/api'
  import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
  import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
  import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
  import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
  import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"

  export default {
    components: {
      cmdNavBar,
      cmdPageBody,
      cmdTransition,
      cmdCellItem,
      cmdAvatar
    },

    data() {
      return {
		  userInfo: {
			avatar: null,
			nickName: null,
			gender: null,
			birthday: null,
			mobile: null,
			email: null
		  },
		  gender: ["未知","男","女"]
	  };
    },
	onShow() {
		this.userInfo = getApp().globalData.userInfo;
	},
    methods:{
      /**
       * 点击触发
       * @param {Object} type 跳转页面名或者类型方式
       */
      fnClick(type){
        if(type == 'modify'){
          uni.navigateTo({
            url:'/pages/user/modify/modify'
          })
        }
		if(type == 'logout') {
			uni.showModal({
				title: '提示',
			    content: '确定退出登录吗？',
			    success: function (res) {
					if (res.confirm) {
		    			uni.removeStorageSync("token");
		    			getApp().globalData.userInfo = {};
		    			uni.navigateTo({
		    			  url:'/pages/user/login/login'
		    			})
			        } else if (res.cancel) {
						console.log('用户点击取消');
			        }
			    }
			});
		}
      },
	  bindDateChange(e) {
		var value = e.detail.value;
		var params = {
			birthday: value
		}
		// 修改用户生日
		modifyUser(params).then(res => {
			uni.showToast({
				title: res.message,
				icon:'exception',
				duration:850
			});
			if (res.code == 200) {
				this.userInfo.birthday = value;	
			}
		});
	  },
	  bindPickerGender(e) {
		  var value = e.detail.value;
		  var params = {
		  	gender: value
		  }
		  // 修改用户性别
		  modifyUser(params).then(res => {
			uni.showToast({
			  	title: res.message,
			  	icon:'exception',
			  	duration:850
			});
			if (res.code == 200) {
				this.userInfo.gender = value; 
			}
		  });
	  },
	  getPhoneNumber(e) {
	  	// 参数e是绑定的授权方法自动传入过来的, 
	  	//主要是为了拿到vi和encryptedData值从后台换取用户联系方式
	  	if ("getPhoneNumber:ok" != e.detail.errMsg){
	  		wx.showToast({
	  			icon:'none',
	  			title: '获取手机号失败'
	  	  	})
	  		return;
	   	}
	  	let iv = e.detail.iv;
	  	let encryptedData = e.detail.encryptedData;
	  	let sessionKey = uni.getStorageSync('sessionKey');
	  	//调用后台接口获取用户手机号码
		let params = {
	  	  	encryptedData,
	  	  	iv,
	  	  	sessionKey
	  	}
	  	decodeUserInfo(params).then(res => {
	  		uni.showToast({
				icon:'none',
	  			title: res.message
	  		});
	  		if (res.code == 200) {
				this.userInfo.mobile = res.data;
	  		} 
	  	})
	  }
    }
  }
</script>

<style>
  .btn-logout {
    margin-top: 100upx;
    width: 80%;
    border-radius: 50upx;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .btn-logout-hover {
    background: linear-gradient(to right, #365fdd, #36bbfa);
  }
</style>
